import React, {useEffect, useState} from 'react';
import {Checkbox, Form, Input, message, Radio, Select,InputNumber} from "antd";
import {FormInstance} from "antd/es/form";
import {createPower, getPowerAll,getPowerShow,updatePower} from "../../../api/power";

type PropsType = React.PropsWithChildren<{
    afterSubmit?: (values: any, isEdit:boolean, form: FormInstance<any>) => void;
    id:number,
    parentId:number,
}>;
interface optionType{
    label :string,
    id:number
    name:string
    value:string
}
function PowerForm(props:PropsType,ref:React.ForwardedRef<FormInstance>) {
    const [form] = Form.useForm();
    const [isEdit, setIsEdit] = useState(false);
    const [powerList,setPowerList] = useState<optionType[]>([]);
    useEffect(() => {
        getPower()
        props.id>0 ? getOnePower(props.id):""
        props.id>0 ? setIsEdit(true):""
        props.parentId>0?form.setFieldsValue({'parent_id':props.parentId}):''
    }, []);

    const getPower = ()=>{
        getPowerAll().then(res=>{
            if(res.data.code===1){
                const options = res.data.data.map((item:any)=>{
                     item.label = item.name
                     item.value = item.id
                    return item
                })
                setPowerList(options)
            }
        })
    }
    const getOnePower = (id:number)=>{
        getPowerShow(id).then(res=>{
            if(res.data.code===1){
                form.setFieldsValue(res.data.data)
            }
        })
    }
    const onChange = (value: string) => {
        console.log(`selected ${value}`);
    };

    const onSearch = (value: string) => {
        console.log('search:', value);
    };
    const onChangeType = ()=>{
        console.log(1)
    }
    const onSubmit = (values:any)=>{
        isEdit===true?editPower(values,props.id):addPower(values)
        form.resetFields();
     }
     const editPower = (values:any,id:number)=>{
         updatePower(values,id).then(res=>{
             if(res.data.code===1){
                 props.afterSubmit?.(values,isEdit, form);
                 return message.success(res.data.msg)
             }
         })
     }
    const addPower = (values:any)=>{
        createPower(values).then(res=>{
            if(res.data.code===1){
                props.afterSubmit?.(values,isEdit, form);
                return message.success(res.data.msg)
            }
        })
    }
    return (
        <div className="form">
            <Form
                onFinish={onSubmit}
                initialValues={form}
                form={form}
                ref={ref}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 16 }}
            >
                <Form.Item
                    label="父类菜单"
                    name="parent_id"
                    rules={[{ required: false, message: 'Please input  parent_id!' }]}
                >
                    <Select
                        showSearch
                        placeholder="请选择父类"
                        optionFilterProp="children"
                        onChange={onChange}
                        onSearch={onSearch}
                        filterOption={(input, option:any) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                        }
                        options={powerList}
                    />
                </Form.Item>
                <Form.Item
                    label="菜单名称"
                    name="name"
                    rules={[{ required: true, message: 'Please input  name!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="类型"
                    name="type"
                    rules={[{ required: true, message: 'Please input  type!' }]}>
                    <Radio.Group onChange={onChangeType}>
                    <Radio value={0}>按钮</Radio>
                    <Radio value={1}>菜单</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    label="图标"
                    name="icon"
                    rules={[{ required: false, message: 'Please input  icon!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="路由"
                    name="url"
                    rules={[{ required: true, message: 'Please input  url!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="排序"
                    name="sort"
                    rules={[{ required: false, message: 'Please input  sort!' }]}
                >
                    <InputNumber />
                </Form.Item>
            </Form>
        </div>
    );
}

export default PowerForm;
